import React, { FC } from 'react';

declare interface listItem {
  label: string;
  value: string | number;
}

interface baseInforCardProps {
  list: listItem[];
  cardItemStyle?: string;
}

const CustomerBasicInfoCard: FC<baseInforCardProps> = (props) => {
  const { list, cardItemStyle } = props;
  const _width = { width: `${cardItemStyle?.split('-')[0]}vw` };
  const _rWidth = { width: `${cardItemStyle?.split('-')[1]}vw` };

  const getViewList = (list: listItem[]) => {
    return list?.map((k: listItem, i: number) => {
      return (
        <div key={i} className="card-item-info">
          <div className='card-item-info-label' style={_width}>{k.label}:</div>
          <div className='card-item-info-content' style={_rWidth}>{k.value}</div>
        </div>)
    })
  }

  return (
    <>{getViewList(list as listItem[])}</>
  )
}

export default CustomerBasicInfoCard;